<template>
<div>
<div class="C1Ddiv1" :style="Nut_Popup_show?'box-shadow: 0px -2px 10px -8px rgb(170, 170, 170);background-color: rgb(255, 255, 255 , 1);':''">
    <img src="../../../../../assets/ttimg/boxa.png" v-show="TotalNum" class="dimg1" @click="ShowCart">
    <img src="../../../../../assets/ttimg/boxb.png" v-show="!TotalNum" class="dimg1">
    <div class="rednumshowdiv" v-show="TotalNum" @click="ShowCart">
        <span>{{TotalNum}}</span>
    </div>
    <div class="C1Ddiv2">
        <div style="font-weight:700;">
            <span>￥</span>
            <span style="font-size:20px;">{{Aprice.toFixed(1)}}</span>
            <span class="span1"><span style="margin-left:8px;margin-right:-3px">￥</span>{{Bprice.toFixed(1)}}</span>
        </div>
        <div style="margin-top:1px">免配送费</div>
    </div>
    <span class="span2" v-show="!TotalNum">￥8起送</span>
    <span class="span2" style="padding-right: 35px;padding-left: 35px;background-color: #4ab7f8;margin-bottom:1px" v-show="TotalNum" @click="gotobuy">去结算</span>
</div>
<div>
</div>
</div>
</template>

<script>
import Vue from 'vue';
import popup from '@nutui/nutui/dist/packages/popup/popup.js';  // 加载构建后的JS
import '@nutui/nutui/dist/packages/popup/popup.css';  //加载构建后的CSS
popup.install(Vue);
import axios from 'axios'
export default {
    name:'C1Down',
    data(){
        return{
            TotalNum:0,
            Nut_Popup_show:false,
            Bprice:0,
            Aprice:0,
            priceing:0,
            AxiosData:[],
            SendCreateOrderData:[],
        }
    },
    methods:{
        ShowCart(){
            this.Nut_Popup_show = !this.Nut_Popup_show
            this.$bus.$emit('Nut_Popup_show',this.Nut_Popup_show)
        },
        gotobuy(){
            console.log('GoOrder!');
            this.SendCreateOrderData=[]
            for(let i=0;i<this.AxiosData.length;i++){
                this.SendCreateOrderData[i]={cid:this.AxiosData[i].cid ,judge:true} //这个之前写的太强了吧,直接赋值会有bug这个不会
            }
            // console.log('this.SendCreateOrderData:',this.SendCreateOrderData);
            this.$router.push({
                name:'PxCreateOrder',
                params:{data:this.SendCreateOrderData}})

        }
    },
    mounted(){
        this.$bus.$on('TotalNumCountNum',(value1,value2)=>{
            // console.log('value1:',value1,'value2:',value2);
            this.TotalNum=value1
            this.priceing=0
            this.$addr.get(`carts`).then(
                response=>{
                    console.log('请求获取该用户购物车信息成功了',response)
                    this.AxiosData=[]
                    if(response.data.data != []){
                        for( let i=0; i<response.data.data.length; i++){
                            if(response.data.data[i].pid.toString().indexOf('20000') != -1){
                                this.AxiosData[i]=response.data.data[i]
                            }
                        }
                        // console.log('axiosdata:',this.AxiosData);
                        for(let i=0;i<this.AxiosData.length;i++){
                            this.priceing+=this.AxiosData[i].num*this.AxiosData[i].price
                        }
                        this.Bprice=this.priceing
                        this.Aprice=this.priceing*0.6
                    }else{
                        this.Bprice=this.Aprice=0
                    }
                },
                error=>{
                    console.log('请求获取该用户购物车信息商品详情失败了',error.message)
                }
            )
        })
        this.$bus.$on('overlayBtn',(value)=>{
            this.Nut_Popup_show=value
        })
    },
    beforeDestroy(){
        this.$bus.$off('TotalNumCountNum')
        this.$bus.$off('overlayBtn')
    }
}
</script>

<style scoped>
.C1Ddiv1{
    padding-top: 8px;
    position: fixed;
    bottom: 0px;
    background-color: rgb(255, 255, 255 , 0.94);
    width: 100%;
    /* nut-popup的显示层默认为2000+ */
    z-index: 5;
}
.dimg1{
    width: 40px;
    margin-left: 15px;
    opacity: 1;
}
.C1Ddiv2{
    opacity: 1;
    position: absolute;
    z-index: 2;
    margin-top: -45px;
    margin-left: 70px;
    font-size: 10px;
}
.span1{
    font-weight: 500;
    font-size: 12px;
    text-decoration-line: line-through;
    color: rgb(175, 175, 175);
}
.span2{
    opacity: 1;
    padding: 8px;
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 20px;
    color: white;
    background-color: rgb(150, 150, 150);
    font-weight: 700;
    margin-right: 30px;
    float: right;
    font-size: 18px;
}
.rednumshowdiv{
    color: white;
    position: absolute;
    z-index: 5;
    margin-top: -43px;
    margin-left: 42px;
    width: 16px;
    height: 14px;
    border-radius: 20px;
    background-color: rgb(255, 57, 31);
    text-align: center;
    font-size: 10px;
    padding-top: 2px;
}
</style>